<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>jQuery支持鼠标滚轮缩放以及点击按钮缩放图片插件 - 【虫鱼之学】</title>
<link rel="stylesheet" href="css/styles.css" type="text/css" />
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/e-smart-zoom-jquery.min.js"></script>
<!--[if lt IE 9]>
    <script src="http://libs.useso.com/js/html5shiv/3.6/html5shiv.min.js"></script>
<![endif]-->
<script>
    $(document).ready(function() {
        $('#imageFullScreen').smartZoom({'containerClass':'zoomableContainer'});
        $('#topPositionMap,#leftPositionMap,#rightPositionMap,#bottomPositionMap').bind("click", moveButtonClickHandler);
        $('#zoomInButton,#zoomOutButton').bind("click", zoomButtonClickHandler);

        function zoomButtonClickHandler(e){
            var scaleToAdd = 0.4;
            if(e.target.id == 'zoomOutButton')
                scaleToAdd = -scaleToAdd;
            $('#imageFullScreen').smartZoom('zoom', scaleToAdd);
        }
        function moveButtonClickHandler(e){
            var pixelsToMoveOnX = 0;
            var pixelsToMoveOnY = 0;

            switch(e.target.id){
                case "leftPositionMap":
                    pixelsToMoveOnX = 200;
                break;
                case "rightPositionMap":
                    pixelsToMoveOnX = -200;
                break;
                case "topPositionMap":
                    pixelsToMoveOnY = 200;
                break;
                case "bottomPositionMap":
                    pixelsToMoveOnY = -200;
                break;
            }
            $('#imageFullScreen').smartZoom('pan', pixelsToMoveOnX, pixelsToMoveOnY);
        }
    });
</script>
</head>
<body class="mkeBody">
<div class="mkeHeadBox">jQuery支持鼠标滚轮缩放以及点击按钮缩放图片插件</div>
<div class="mkeContentBox">
<!--效果html开始-->
<div id="pageContent">
  <div id="imgContainer"><img id="imageFullScreen" src="assets/webImg.jpg"/></div>
  <div id="positionButtonDiv">
    <p>
     <span>
      <img id="zoomInButton" class="zoomButton" src="assets/zoomIn.png" title="zoom in" alt="zoom in" />
      <img id="zoomOutButton" class="zoomButton" src="assets/zoomOut.png" title="zoom out" alt="zoom out" />
     </span>
    </p>
    <p><span class="positionButtonSpan">
      <map name="positionMap" class="positionMapClass">
        <area id="topPositionMap" shape="rect" coords="20,0,40,20" title="move up" alt="move up"/>
        <area id="leftPositionMap" shape="rect" coords="0,20,20,40" title="move left" alt="move left"/>
        <area id="rightPositionMap" shape="rect" coords="40,20,60,40" title="move right" alt="move right"/>
        <area id="bottomPositionMap" shape="rect" coords="20,40,40,60" title="move bottom" alt="move bottom"/>
      </map>
      <img src="assets/position.png" usemap="#positionMap" /> </span> </p>
  </div>
</div>
<!--效果html结束-->
</div>
<div class="mkeFooterBox">
<p>虫鱼之学网页特效集锦---更多特效请访问 <a class="mkeURL" href="http://www.lidexiao.top">www.lidexiao.top</a></p>
</div>

</body>
</html>
